import { PageContainer } from '@ant-design/pro-components';
import { Card, Col, Row, Statistic, Typography, Button } from 'antd';
import {
  LineChartOutlined,
  ApiOutlined,
  CodeOutlined,
  RocketOutlined
} from '@ant-design/icons';
import { Link } from 'umi';
import styles from './index.less';

const { Title, Text } = Typography;

const HomePage = () => {
  return (
    <PageContainer ghost header={{ title: null }}>
      <div className={styles.container}>
        {/* 欢迎横幅 */}
        <Card bordered={false} className={styles.welcomeCard}>
          <Title level={3} style={{ marginBottom: 8 }}>
            欢迎使用智能开发平台 <RocketOutlined />
          </Title>
          <Text type="secondary">数据洞察 • API服务 • 代码生成</Text>
        </Card>

        {/* 核心功能入口 */}
        <Row gutter={[24, 24]} className={styles.featureRow}>
          <Col xs={24} md={8}>
            <Card hoverable>
              <div className={styles.featureItem}>
                <LineChartOutlined className={styles.featureIcon} />
                <Title level={5} className={styles.featureTitle}>智能分析</Title>
                <Link to="/chart">
                  <Button type="primary" style={{ marginTop: 16 }}>立即使用</Button>
                </Link>
              </div>
            </Card>
          </Col>

          <Col xs={24} md={8}>
            <Card hoverable>
              <div className={styles.featureItem}>
                <ApiOutlined className={styles.featureIcon} />
                <Title level={5} className={styles.featureTitle}>API服务</Title>
                <Link to="/interface_info">
                  <Button type="primary" style={{ marginTop: 16 }}>立即使用</Button>
                </Link>
              </div>
            </Card>
          </Col>

          <Col xs={24} md={8}>
            <Card hoverable>
              <div className={styles.featureItem}>
                <CodeOutlined className={styles.featureIcon} />
                <Title level={5} className={styles.featureTitle}>代码生成</Title>
                <Link to="/generator">
                  <Button type="primary" style={{ marginTop: 16 }}>立即使用</Button>
                </Link>
              </div>
            </Card>
          </Col>
        </Row>

        {/* 快速数据统计 */}
        <Row gutter={24} className={styles.statsRow}>
          <Col span={8}>
            <Statistic
              title="今日API调用"
              value={1128}
              suffix="次"
              valueStyle={{ color: '#1890ff' }}
            />
          </Col>
          <Col span={8}>
            <Statistic
              title="图表生成量"
              value={256}
              suffix="个"
              valueStyle={{ color: '#52c41a' }}
            />
          </Col>
          <Col span={8}>
            <Statistic
              title="代码生成次数"
              value={89}
              suffix="次"
              valueStyle={{ color: '#722ed1' }}
            />
          </Col>
        </Row>
      </div>
    </PageContainer>
  );
};

export default HomePage;